i.ico { 
    display: block;
    font-size: 18px
    line-height: 18px
    text-align: center
    width: 18px
    height: 18px
    min-width: 18px
    min-height: 18px
    font-family: hot_icons
    font-weight: 400
    background-size: 18px 
    filter: brightness(0)
}

i.Logo { 
    background:  url('{{$basePath}}/img/logo.svg');
}

.i-arrow        { background:  url('{{$basePath}}/img/svg/chevron-down.svg'); }
.i-bell         { background:  url('{{$basePath}}/img/svg/bell.svg'); }
.i-close        { background:  url('{{$basePath}}/img/svg/x.svg'); }
.i-angular      { background:  url('{{$basePath}}/img/svg/brand-angular.svg'); }
.i-react        { background:  url('{{$basePath}}/img/svg/brand-react-native.svg'); }
.i-vue          { background:  url('{{$basePath}}/img/svg/brand-vue.svg'); }
.i-javascript   { background:  url('{{$basePath}}/img/svg/brand-javascript.svg'); }
.i-ts           { background:  url('{{$basePath}}/img/svg/brand-ts.svg'); }
.i-github       { background:  url('{{$basePath}}/img/svg/brand-github.svg'); }
.i-linkedin     { background:  url('{{$basePath}}/img/svg/brand-linkedin.svg'); }
.i-twitter      { background:  url('{{$basePath}}/img/svg/twitter.svg'); }
.i-dm-light     { background:  url('{{$basePath}}/img/svg/moon.svg'); }
.i-dm-dark      { background:  url('{{$basePath}}/img/svg/sun.svg'); }
.i-search       { background:  url('{{$basePath}}/img/svg/search.svg'); }
.i-menu, .i-toc { background:  url('{{$basePath}}/img/svg/menu.svg'); }
.i-home         { background:  url('{{$basePath}}/img/svg/home.svg'); }
.i-external     { background:  url('{{$basePath}}/img/svg/external-link.svg'); }
.i-copy         { background:  url('{{$basePath}}/img/svg/copy.svg'); }
.i-checks       { background:  url('{{$basePath}}/img/svg/checks.svg'); }
.i-report       { background:  url('{{$basePath}}/img/svg/report.svg'); }
.i-code         { background:  url('{{$basePath}}/img/svg/code.svg'); }
.i-zoom         { background:  url('{{$basePath}}/img/svg/zoom.svg'); }
.i-refresh      { background:  url('{{$basePath}}/img/svg/refresh.svg'); }



.sidebar .sidebar-nav > .sidebar-links > li {
    &:nth-child(1)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/rocket.svg'); background-size: 18px }               // Getting started
    &:nth-child(2)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/paint.svg'); background-size: 18px }               // Styling
    &:nth-child(3)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/layout-columns.svg'); background-size: 18px }       // Columns
    &:nth-child(4)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/layout-columns2.svg'); background-size: 18px }      // Rows
    &:nth-child(5)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/forms.svg'); background-size: 18px }                // Cell features
    &:nth-child(6)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/function.svg'); background-size: 18px }             // Cell functions
    &:nth-child(7)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/settings-2.svg'); background-size: 18px }           // Cell types
    &:nth-child(8)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/math-function.svg'); background-size: 18px }        // Formulas
    &:nth-child(9)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/keyboard.svg'); background-size: 18px }             // Navigation
    &:nth-child(10)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/accessible.svg'); background-size: 18px }           // Accessibility
    &:nth-child(11)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/layout-list.svg'); background-size: 18px }         // Accessories and menus
    &:nth-child(12)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/language.svg'); background-size: 18px }            // Internationalization
    &:nth-child(13)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/brand-angular.svg'); background-size: 18px }       // Integrate with Angular
    &:nth-child(14)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/brand-vue.svg'); background-size: 18px }           // Integrate with Vue 2
    &:nth-child(15)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/brand-vue.svg'); background-size: 18px }           // Integrate with Vue 3
    &:nth-child(16)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/tools.svg'); background-size: 18px }               // Tools and building
    &:nth-child(17)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/chart-line.svg'); background-size: 18px }          // Optimization
    &:nth-child(18)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/shield-half.svg'); background-size: 18px }         // Security
    &:nth-child(19)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/code.svg'); background-size: 18px }                // Technical specification
    &:nth-child(20)  > section p i:first-child { background:  url('{{$basePath}}/img/svg/git-branch.svg'); background-size: 18px }          // Upgrade and migration
    > section a i:first-child { background:  url('{{$basePath}}/img/svg/plugin.svg'); background-size: 18px }                               // Plugin
} 